<script setup>
import NFTIcon from "./icons/IconNFT.vue";
import CreateNFTIcon from "./icons/IconCreateNFT.vue";
import UserIcon from "./icons/IconUser.vue";
</script>
<template>
  <div class="bottom">
    <router-link class="item" to="/">
      <NFTIcon />
      <p>NFT</p>
    </router-link>

    <router-link class="item" to="/CreateNFT">
      <CreateNFTIcon />
      <p>铸造</p>
    </router-link>

    <router-link class="item" to="/My">
      <UserIcon />
      <p>用户</p>
    </router-link>
  </div>

  <RouterView />
</template>
<style scoped>
/* @import "./../icon/iconfont.css"; */
* {
  margin: 0px;
  padding: 0px;
}

.bottom {
  position: fixed;
  bottom: 0px;
  left: 0%;

  background-color: #ffffff;
  width: 100%;
  height: 83px;
  z-index: 5;

  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  order: 0;
}

.item {
  margin-top: 0px;
  margin-bottom: 34px;

  padding-top: 11px;

  text-align: center;
  order: 1;
}
.item p {
  margin-top: -4px;
  margin-bottom: 0px;
  font-size: 10px;
}

a {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}
a.router-link-active {
  text-decoration: none;
  color: hsl(160, 100%, 18%);
  background-color: hsla(160, 100%, 37%, 0.2);
}
@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}
</style>
